<template>
    <div>
        <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="($router.push('/home/index'))" />
        <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
        <!-- 搜索内容 -->
        <div v-show="!hisdata">
            <van-cell-group v-for="item in qsearch">
                <van-cell :title="item.goods_name" />
            </van-cell-group>
        </div>
        <div class="hot" v-show="hisdata">
            <h4>历史搜索</h4>
            <van-tag type="primary" size="large">电视机</van-tag>
            <van-tag type="primary" size="large">液晶电视</van-tag>
            <van-tag type="primary" size="large">液晶屏幕</van-tag>
            <van-tag type="primary" size="large">智能手机</van-tag>
            <van-tag type="primary" size="large">华为手机</van-tag>
        </div>
        <div class="his" v-show="hisdata">
            <h4>热门搜索</h4>
            <van-tag type="primary" size="large">手机电池</van-tag>
            <van-tag type="primary" size="large">MP3</van-tag>
            <van-tag type="primary" size="large">摄像机</van-tag>
            <van-tag type="primary" size="large">液晶电视</van-tag>
            <van-tag type="primary" size="large">录音笔</van-tag>
            <van-tag type="primary" size="large">电脑桌</van-tag>
        </div>


    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { qsearchApi } from '@/api/api';
import _ from 'lodash'
let hisdata=ref(true)
let qsearch = ref([])
let value = ref('')
watch(value, 
_.debounce((val) => {
    if(val.length==0){
        hisdata.value=true
    }
    else{
        hisdata.value=false
        qsearchApi(val).then(res => {
        console.log('搜索数据', res)
        qsearch.value = res.data.message
        
    })
    }
    
},2000))

</script>

<style lang="scss" scoped>
.hot{
    float: left;
    .van-tag{
        margin: 10px;
        background-color: #ccc;
    }
}
.his{
    float: left;
    .van-tag{
        margin: 10px;
        background-color: #ccc;
    }
}
</style>